<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="success" @click="handleSubmit"> 提交修改 </el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form :model="device">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="device.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="位置" :label-width="formLabelWidth">
              <el-input v-model="device.position" autocomplete="off" />
            </el-form-item>
            <el-form-item label="SN" :label-width="formLabelWidth">
              <el-input v-model="device.sn" autocomplete="off" />
            </el-form-item>
            <el-form-item label="订阅" :label-width="formLabelWidth">
              <el-input v-model="device.sub" autocomplete="off" />
            </el-form-item>
            <el-form-item label="推送" :label-width="formLabelWidth">
              <el-input v-model="device.pub" autocomplete="off" />
            </el-form-item>
            <el-form-item label="型号" :label-width="formLabelWidth">
              <el-input v-model="device.model" autocomplete="off" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>电机运动轴设置</span>
          </div>
          <div v-for="(item, index) in axis" :key="index" :label="item.name">
            <el-form :model="item">
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="item.name" autocomplete="off" placeholder="请输入轴名称" />
              </el-form-item>
              <el-form-item label="移动码" :label-width="formLabelWidth">
                <el-input-number v-model="item.move_code" autocomplete="off" />
              </el-form-item>
              <el-form-item label="停止码" :label-width="formLabelWidth">
                <el-input-number v-model="item.stop_code" autocomplete="off" />
              </el-form-item>
              <el-form-item label="获取位置码" :label-width="formLabelWidth">
                <el-input-number v-model="item.get_position_code" autocomplete="off" />
              </el-form-item>
              <el-form-item label="常用位置" :label-width="formLabelWidth">
                <el-button class="button-new-tag" size="small" @click="handleAddPos(index)">+ 添加位置</el-button>
                <el-table :data="item.positions" style="width: 100%" border>
                  <el-table-column prop="name" label="位置名称" width="180" />
                  <el-table-column prop="value" label="值" />
                  <el-table-column label="操作">
                    <template slot-scope="{row,$index}">
                      <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelPos(index,$index)"> 删除 </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-button class="button-new-tag" type="danger" @click="handleDeleteAxis(index)"> 删除当前轴</el-button>
              <el-divider />
            </el-form>
          </div>
          <el-button class="button-new-tag" type="primary" @click="handleAddAxis()">新增移动轴</el-button>
        </el-card>
      </el-col>

    </el-row>

    <el-dialog title="添加位置" :visible.sync="dialogAddPosFormVisible">
      <el-form :model="addPosform">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="addPosform.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="值" :label-width="formLabelWidth">
          <el-input v-model="addPosform.value" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddPosFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddPosConfirm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { editDevice } from '@/api/device'

export default {
  name: 'RG603',
  components: { },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      formLabelWidth: '100px',
      device: {},
      value: {},
      // 坐标轴信息
      axis: [],
      // 添加位置相关变量
      dialogAddPosFormVisible: false,
      addPosIndex: 0,
      addPosform: {
        name: '',
        value: 0
      }
    }
  },
  created() {
    this.device = this.$route.query
    var value = this.device.value
    if (value.axis) {
      this.axis = value.axis
    }
  },
  methods: {

    handleDelPos(axis_index, pos_index) {
      this.axis[axis_index].positions.splice(pos_index, 1)
    },

    handleAddPos(index) {
      this.addPosIndex = index
      this.dialogAddPosFormVisible = true
    },

    handleAddPosConfirm() {
      this.axis[this.addPosIndex].positions.push(JSON.parse(JSON.stringify(this.addPosform)))
      this.dialogAddPosFormVisible = false
    },

    handleAddAxis() {
      this.axis.push({
        name: '',
        start: 0,
        end: 0,
        move_code: 0,
        stop_code: 0,
        get_position_code: 0,
        positions: []
      })
    },

    handleDeleteAxis(index) {
      this.axis.splice(index, 1)
    },

    handleSubmit() {
      this.device.value = JSON.stringify({ axis: this.axis })
      editDevice(this.device).then(response => {
        if (response.code === 20000) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/device' })
        } else this.$message(response.message)
      })
    }

  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
    margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
